<template>
    <div class="m-footer-menu-bar">
        <dl>
            <dd
                :class="[activeIndex == tab.id ? 'active' : '', 'm-bar-col']"
                v-for="(tab, index) in tabMenus"
                :key="index"
                @click="linkTo(tab)"
            >
                {{ tab.label }}
            </dd>
        </dl>
    </div>
</template>

<script>
export default {
    name: 'DuoduocaiH5BottomMenu',

    data() {
        return {
            activeIndex: 0,
        };
    },
    watch: {
        $route: {
            immediate: true,
            handler: function () {
                this.routerName = this.$route.name;
                if (this.$route.name === 'Expert' || this.$route.name === 'IntelligentRecommendation') {
                    this.routerName = 'Master';
                }
                console.log(this.routerName);
                this.activeIndex = (this.tabMenus.find((item) => item.name === this.routerName) || {}).id;
            },
        },
    },
    computed: {
        tabMenus() {
            return [
                {
                    label: '首页',
                    name: 'Home',
                    icon: 'f-home-icon',
                    id: 0,
                },
                {
                    label: '开奖',
                    name: 'Kaijiang',
                    icon: 'f-home-icon',
                    id: 1,
                },
                {
                    label: '专家',
                    name: 'Master',
                    icon: 'f-home-icon',
                    id: 2,
                },
                {
                    label: '社区',
                    name: 'Community',
                    icon: 'f-home-icon',
                    id: 3,
                },
                {
                    label: '我的',
                    name: 'My',
                    icon: 'f-my-icon',
                    id: 4,
                },
            ];
        },
    },
    mounted() {},

    methods: {
        async linkTo({ name, id, handler }) {
            if (this.activeIndex == id) return;
            if (handler) {
                await handler();
            }
            this.$router.push({
                name: name,
            });
            this.activeIndex = id;
        },
    },
};
</script>

<style scoped lang="scss">
.m-footer-menu-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
}
dl {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    .m-bar-col {
        width: 50%;
        flex: 1;
        color: #666;
        font-size: 0.12rem;
        text-align: center;
        line-height: 50px;
    }
}
.m-bar-col.active {
    color: red;
}
</style>
